<template>
	<view class="rf-order-detail">
		<view class="order-detail" v-if="orderDetail">

			<!-- 订单号 -->
			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">客户姓名</text>
					<text class="cell-tip">
						{{ orderDetail.customerName }}
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">客户手机</text>
					<text class="cell-tip">
						{{ orderDetail.customerMobile }}
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">车辆型号</text>
					<text class="cell-tip">
						{{ orderDetail.orderAttr.carLx }}
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">车牌号码</text>
					<text class="cell-tip">
						{{ orderDetail.orderAttr.platNo }}
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">车架号码</text>
					<text class="cell-tip">
						{{ orderDetail.orderAttr.vin }}
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">车辆颜色</text>
					<text class="cell-tip">
						{{ orderDetail.orderAttr.color }}
					</text>
				</view>
			</view>
			<!-- -->
			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">施工单位</text>
					<text class="cell-tip">
						{{ orderDetail.sysStore.storeName }}
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">施工日期</text>
					<text class="cell-tip">
						{{ orderDetail.createTime }}
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">施工部位</text>
					<text class="cell-tip">
						{{ orderDetail.customerMobile }}
					</text>
				</view>
			</view>

			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">产品编号</text>
					<text class="cell-tip">
						{{ orderDetail.customerMobile }}
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">质保年限</text>
					<text class="cell-tip">
						{{ orderDetail.customerMobile }}
					</text>
				</view>

			</view>



			<!-- 底部 -->

		</view>
		<!-- 404页面 -->
		<view v-if="!orderDetail && !loading">
			<rf-no-data class="rf-no-data" :custom="true">
				<view class="title" @tap="getOrderDetail">
					{{ errInfo || '信息不存在' }}
				</view>
				<view @tap="getOrderDetail" slot="refresh" class="spec-color">重新加载</view>
			</rf-no-data>
		</view>
		<!--页面加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
		<!-- 发票类型面板 -->
		<view class="mask" :class="maskState === 1 ? 'show' : 'none'" @tap="toggleMask">
			<view class="mask-content" @tap.stop.prevent="stopPrevent">
				<!-- 发票类型 -->
				<view class="sub-list">
					<view class="radio-wrapper">
						<text class="title">发票类型: </text>
						<radio-group class="invoice-content" @change="handleInvoiceContentChange">
							<label class="invoice-content-item" v-for="(item, index) in invoiceItem.invoiceContentArr" :key="index">
								<radio class="invoice-content-item-radio" :value="item" :color="themeColor.color" :checked="orderInvoiceContent == item" />
								<text class="gender-item-text">{{ item }}</text>
							</label>
						</radio-group>
					</view>
				</view>
				<button @tap.stop="handleOrderInvoiceCreate" class="confirm-btn" :class="'bg-' + themeColor.name">确定</button>
			</view>
		</view>
		<rf-kefu></rf-kefu>
	</view>
</template>
<script>
import moment from '@/common/moment'
import mConstData from '@/config/constData.config'
import rfNoData from '@/components/rf-no-data'
import {
  orderClose
} from '@/api/product'
import uniTag from '@/components/uni-tag/uni-tag'
import rfKefu from '@/components/rf-kefu'
import {
  orderDetail,
  closeOrderRefundApply,
  orderCustomerRefundClose,
  orderDelete,
  orderTakeDelivery,
  orderInvoiceCreate
} from '@/api/userInfo'
import {
  configList
} from '@/api/basic'
export default {
  components: {
    uniTag,
    rfKefu,
    rfNoData
  },
  data () {
    return {
      maskState: 0, // 优惠券面板显示状态
      orderDetail: {
        pickup: {}
      },
      logo: this.$mSettingConfig.appLogo,
      appName: this.$mSettingConfig.appName,
      invoiceItem: {},
      loading: true,
      errInfo: null,
      order_id: null,
      moneySymbol: this.moneySymbol,
      orderInvoiceContent: '',
      singleSkuText: this.singleSkuText
    }
  },
  computed: {
    orderTimeLine () {
      const timeLine = []
      if (this.orderDetail.createTime !== '0') {
        timeLine.push({
          time: this.orderDetail.createTime,
          value: '订单创建'
        })
      }
      if (this.orderDetail.cancelTime &&
					this.orderDetail.cancelTime <
					(new Date().getTime() / 1000)
      ) {
        timeLine.push({
          time: this.orderDetail.cancelTime,
          value: '未付款订单关闭时间'
        })
      }

      if (this.orderDetail.payTime !== '0') {
        timeLine.push({
          time: this.orderDetail.payTime,
          value: '订单支付'
        })
      }
      if (this.orderDetail.shipping_time !== '0') {
        timeLine.push({
          time: this.orderDetail.shipping_time,
          value: '买家要求发货'
        })
      }
      if (this.orderDetail.deliveryTime !== '0') {
        timeLine.push({
          time: this.orderDetail.deliveryTime,
          value: '卖家发货'
        })
      }
      if (this.orderDetail.receivingTime !== '0') {
        timeLine.push({
          time: this.orderDetail.receivingTime,
          value: '买家确认收货'
        })
      }
      console.log(timeLine.reverse())
      return timeLine.reverse()
    }
  },
  filters: {
    orderTypeFilter (orderStatus) {
      let state = null
      mConstData.orderType.forEach(orderItem => {
        if (orderItem.key === parseInt(orderStatus, 10)) {
          state = orderItem.value
        }
      })
      return state
    },
    time (val) {
      return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
    },
    orderStatusFilter (orderStatus) {
      let state = null
      mConstData.orderStatus.forEach(orderItem => {
        if (orderItem.key === parseInt(orderStatus, 10)) {
          state = orderItem.value
        }
      })
      return state
    },
    filterProductStatus (item) {
      let status = ''
      if (
        parseInt(item.refund_status, 10) !== 0 &&
					parseInt(item.refund_status, 10) !== -1 &&
					parseInt(item.refund_status, 10) !== -2
      ) {
        mConstData.refundStatus.forEach(refundItem => {
          if (refundItem.key === parseInt(item.refund_status, 10)) {
            status = refundItem.value
          }
        })
      } else if (parseInt(orderDetail.status, 10) === 4) {
        mConstData.evaluateStatus.forEach(evaluateItem => {
          if (evaluateItem.key === parseInt(item.is_evaluate, 10)) {
            status = evaluateItem.value
          }
        })
      } else {
        mConstData.orderStatus.forEach(orderItem => {
          if (orderItem.key === parseInt(orderDetail.status, 10)) {
            status = orderItem.value
          }
        })
        // 有物流信息则说明已发货
        if (orderDetail.status === '1' && item.shipping_status === '1') {
          status = '已发货'
        }
      }
      return status
    },
    filterShippingType (value) {
      console.log('shipping:', value)
      if (value) {
        const data = ['', '物流配送', '买家自提', '本地配送']
        return data[parseInt(value, 10)]
      } else {
        return ''
      }
    }
  },
  onLoad (options) {
    this.order_id = options.id
  },
  onShow () {
    this.initData()
  },
  methods: {
    // 监听发票内容发生改变
    handleInvoiceContentChange (e) {
      this.orderInvoiceContent = e.detail.value
    },
    // 显示优惠券面板
    toggleMask (type) {
      const timer = type === 'show' ? 10 : 300
      const state = type === 'show' ? 1 : 0
      this.maskState = 2
      setTimeout(() => {
        this.maskState = state
      }, timer)
    },
    stopPrevent () {},
    // 订单号复制
    copy (content) {
      /* #ifdef H5 */
      this.$mHelper.h5Copy(content)
      /* #endif */
      /* #ifndef H5 */
      uni.setClipboardData({
        data: content,
        success: function () {
          this.$mHelper.toast('复制成功')
        }
      })
      /* #endif */
    },
    navTo (route) {
      this.$mRouter.push({
        route
      })
    },
    navToEvaluation (item, type) {
      this.$mRouter.push({
        route: `/pages/order/evaluation/evaluation?data=${JSON.stringify(
					item
				)}&type=${type}`
      })
    },
    navToRefund (item, type) {
      this.$mRouter.push({
        route: `/pages/order/refund/refund?data=${JSON.stringify(
					item
				)}&refundType=${type}`
      })
    },
    navToShippingReturn (item) {
      this.$mRouter.push({
        route: `/pages/order/shipping/return?data=${JSON.stringify(item)}`
      })
    },
    // 订单操作
    handleOrderOperation (item, type) {
      switch (type) {
        case 'detail': // 订单详情
          this.navTo(`/pages/order/detail?id=${item.id}`)
          break
        case 'evaluation': // 我要评价
          this.navTo(`/pages/order/evaluation/evaluation?order_id=${item.id}`)
          break
        case 'close': // 取消订单
          this.handleOrderClose(item.id)
          break
        case 'delete': // 删除订单
          this.handleOrderDelete(item.id)
          break
        case 'shipping': // 查看物流
          this.navTo(`/pages/order/shipping/shipping?id=${item.id}`)
          break
        case 'delivery': // 确认收货
          this.handleOrderTakeDelivery(item.id)
          break
      }
    },
    // 初始化数据
    initData () {
      this.getOrderDetail()
    },
    // 获取订单详情
    async getOrderDetail () {
      await this.$http
        .get(`${orderDetail}`, {
          orderId: this.order_id
        })
        .then(r => {
          this.loading = false
          this.orderDetail = r
          if (this.invoiceItem.id && !this.orderDetail.invoice) {
            // this.$http.get(configList, {
            //   field: 'order_invoice_content'
            // }).then(r => {
            //   if (true) {
            //     this.invoiceItem.invoiceContentArr = ['普通发票']
            //     this.orderInvoiceContent = this.invoiceItem.invoiceContentArr[0]
            //     this.toggleMask('show')
            //   } else {
            //     this.invoiceItem.invoiceContentArr = []
            //     this.$mHelper.toast('请联系管理员配置发票类型')
            //   }
            // })
            this.invoiceItem.invoiceContentArr = ['增值税发票', '普通发票']
            this.orderInvoiceContent = this.invoiceItem.invoiceContentArr[0]
            this.toggleMask('show')
          }
        })
        .catch(err => {
          this.loading = false
          this.errInfo = err
        })
    },
    async handleOrderInvoiceCreate () {
      await this.$http.get(orderInvoiceCreate, {
        orderId: this.orderDetail.id,
        invoiceId: this.invoiceItem.id,
        invoice_content: this.orderInvoiceContent
      }).then(() => {
        this.toggleMask()
        this.getOrderDetail()
      })
    },
    // 取消订单
    async handleOrderClose (orderId) {
      await this.$http
        .get(`${orderClose}`, {
          orderId
        })
        .then(() => {
          this.$mHelper.toast('订单取消成功')
          this.getOrderDetail()
        })
    },
    // 删除已关闭订单
    async handleOrderDelete (id) {
      await this.$http.delete(`${orderDelete}?id=${id}`, {}).then(() => {
        this.$mHelper.toast('订单删除成功')
        this.$mRouter.back()
      })
    },
    // 确认收货
    async handleOrderTakeDelivery (orderId) {
      await this.$http
        .get(`${orderTakeDelivery}`, {
          orderId
        })
        .then(() => {
          this.$mHelper.toast('确认收货成功')
          this.getOrderDetail()
        })
    },
    // 产品退款/退货关闭申请
    async handleCloseOrderRefundApply (status, id) {
      uni.showModal({
        content: '取消退款后将无法再次提交申请，是否继续取消退款?',
        success: async e => {
          if (e.confirm) {
            let closeOrderApi = closeOrderRefundApply
            if (parseInt(status, 10) === 4) {
              closeOrderApi = orderCustomerRefundClose
            }
            await this.$http
              .post(`${closeOrderApi}`, {
                id
              })
              .then(r => {
                this.$mHelper.toast('取消成功')
                this.getOrderDetail()
              })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
	page {
		background: $page-color-base;
	}

	.order-detail {
		padding-bottom: 100upx;
	}

	.rf-goods-section {
		.g-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.cover {
					width: 48upx;
					height: 48upx;
					border-radius: 50%;
					margin-right: 10upx;
				}
			}
		}

		.g-item {
			border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
		}

		.g-item:last-child {
			border-bottom: none;
		}

		.right {
			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $font-color-dark;
				border-bottom: 1upx solid rgba(0, 0, 0, 0.05);

				.price-wrapper {
					margin-bottom: 10upx;
					flex: 1;

					.price {
						font-size: $font-sm;
						margin-bottom: 4upx;
					}

					.number {
						font-size: $font-sm;
						color: $font-color-base;
						margin-left: $font-sm;
					}

					.original-price {
						font-size: $font-sm;
						color: $font-color-light;
						margin-left: $spacing-sm;
						text-decoration: line-through;
					}
				}

				.status {
					font-size: 24upx;
					margin-left: $spacing-sm;
				}

				.spec-color {
					color: $font-color-spec;
				}
			}

			.btn-box {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin: $spacing-sm 0;

				.action-btn {
					font-size: $font-sm;
					margin: 0 0 0 15upx;
					padding: 0 28upx;
					color: $font-color-base;
					text-align: center;
					height: 50upx;
					border-radius: 32upx;
					line-height: 50upx;
					border: 1upx solid rgba(0, 0, 0, 0.15);
				}
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;

		.yt-list-cell {
			display: flex;
			align-items: center;
			padding: 10upx 30upx 10upx 40upx;
			line-height: 70upx;
			position: relative;

			&.cell-hover {
				background: #fafafa;
			}

			&.b-b:after {
				left: 30upx;
			}

			.cell-icon {
				height: 32upx;
				width: 32upx;
				font-size: 22upx;
				text-align: center;
				line-height: 32upx;
				border-radius: 4upx;
				margin-right: 12upx;

				&.hb {
					background: #ffaa0e;
				}

				&.lpk {
					background: #3ab54a;
				}
			}

			.cell-more {
				align-self: center;
				font-size: 24upx;
				color: $font-color-light;
				margin-left: 8upx;
				margin-right: -10upx;
			}

			.cell-tit {
				flex: 1;
				font-size: 26upx;
				color: $font-color-light;
				margin-right: 10upx;
			}

			.cell-tip {
				font-size: 26upx;

				&.disabled {
					color: $font-color-light;
				}
			}

			&.desc-cell {
				.cell-tit {
					max-width: 90upx;
				}
			}

			.desc {
				flex: 1;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.copy {
				margin-left: $spacing-sm;
			}
		}
	}

	.uni-timeline {
		padding: $spacing-lg;
		background-color: $color-white;
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 98;
		width: 100%;
		background-color: $color-white;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 15upx $spacing-base;

		.action-btn {
			font-size: $font-sm;
			margin: 0 0 0 15upx;
			padding: 0 $spacing-lg;
			text-align: center;
			height: 60upx;
			line-height: 60upx;
		}
	}

	.rf-no-data {
		height: calc(100vh - 90upx);
	}

	.pickup-tag {
		margin-right: $spacing-sm;
	}

	/* 优惠券面板 */
	.mask {
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0);
		z-index: 99;
		transition: 0.3s;

		.mask-content {
			width: 100%;
			max-height: 70vh;
			min-height: 16vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: 0.3s;
			overflow-y: scroll;

			.sub-list {
				padding: $spacing-lg;

				.radio-wrapper {
					display: flex;
					justify-content: space-between;
				}

				.title {
					width: 300upx;
				}

				.invoice-content {
					.invoice-content-item-radio {
						margin: 0 $spacing-sm $spacing-sm $spacing-base;
					}
				}
			}

			.confirm-btn {
				margin: $spacing-base auto $spacing-lg;
			}
		}

		&.none {
			display: none;
		}

		&.show {
			background: rgba(0, 0, 0, 0.4);

			.mask-content {
				transform: translateY(0);
			}
		}
	}
</style>
